/*
* @Author: majingyu
* @Date:   2017-05-22 16:39:13
* @Last Modified by:   jingyu.ma
* @Last Modified time: 2017-08-12 18:03:40
*/

import React, { Component }from 'react';
import { PropTypes } from 'react';
import { connect } from 'react-redux';
import DatePicker from 'react-mobile-datepicker';
import JudgeMobile from 'components/judgeMobile.jsx';
import { changeIsShow, changeDataShow, publishSkill} from 'action/publishService.js';
import { formatTime } from 'common/date.js';
import { toast } from 'common/tips.js';
import { local } from 'common/local.js';;
import { isNumber } from 'common/test.js';
import 'css/publishService.less';

class PublishSkillInfo extends Component {
    constructor(props){
        super(props);
        let locals = local();
        this.state = {
            isOpen: false,
            dateFormat: ['YYYY年', 'MM月', 'DD日'],
            hoursArray: [],
            minArray:[],
            date: new Date(),
            periodOfValidity: 7,  //默认的有效期值
            address: 3,
            way: 1,
            price: '',
            remark: '',
            teacherType:'1',
            lat:locals.lat,
            lng:locals.lng
        }
    }
    componentDidMount(){
        this.initTime();
    }
    initTime(){
        let date = new Date();
        let nowDay = date.getDate(),
            nowHours = date.getHours();
        let day = this.state.date.getDate();
        let startHours = nowDay == day ? nowHours+2:1;
        let hoursArray = [], minArray = [];
        for(let i=startHours; i<=24; i++){
            hoursArray.push(i);
        }
        for(let j=0; j<60; j+=10){
            minArray.push(j);
        }
        this.setState(Object.assign({},this.state,{
            hoursArray: hoursArray,
            minArray:minArray,
            hours: startHours,
            minute: 0
        }))
    }
    handleSelect(time){
        this.setState(Object.assign({},this.state,{
            date: time
        }))
        this.props.changeDate(time);
        this.changeOpen(0);
      
    }
    changeOpen(type){
        let status = type?true:false;
        this.setState(Object.assign({},this.state,{
            isOpen: status
        }))
    }
    isActive(value){
        return value == this.state.periodOfValidity?'active':'';
    }
    isAddressActive(value){
        return value == this.state.address?'active':'addressInfo';
    }
    isWayActive(value){
        return value == this.state.way?'active':'wayInfo';
    }
    isTeachTypeActive(value){
        return value == this.state.way?'active':'teachType';
    }
    changeValue(name, value){
        if(this.state[name] && value){
            let params = {};
            params[name] = value;
            this.setState(Object.assign({},this.state,params));
        }
    }
    getValues(e){
        let name = e.target.name,
            value = e.target.value;
        if(value){
            let params = {};
            params[name] = value;
            this.setState(Object.assign({},this.state,params));
        }
    }
    
    publish(){
        let days = formatTime(this.state.date,'yyyy-MM-dd'),
            hours = this.state.hours,
            minute = this.state.minute<10?'0'+this.state.minute:this.state.minute;
        let date = days+' '+hours+':'+minute+':00';
        if(!this.state.price){
            toast('价格必须填写');
            return;
        }
        
        let submitData = {
            courseId:this.props.service.calssListCheck.id,
            teacherType: this.state.teacherType,
            learningTime: date,
            validTime: this.state.periodOfValidity,
            address: this.state.address,
            price: this.state.price*100,
            serviceType: this.state.way,
            content: this.state.remark,
            cityId: this.props.app.cityId,
            cityName:this.props.app.cityName,
            sex:this.state.sex,
            lat:this.state.lat,
            lng:this.state.lng
        }
        this.props.submit(submitData);
    }
    render(){
        let dateValue = formatTime(this.state.date,'yyyy-MM-dd');
        console.log("here"+dateValue);
        return(
            <div className="content">
                <div className="form-publish">
                    <div className="form-block publish-type">
                        <lable className="title">发布类别:</lable>
                        <div className="txt">{this.props.service.calssListCheck.name}</div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-date">
                        <lable className="title">发布日期:</lable>
                        <div className="txt">
                            <input type="text" className="input-info" onClick={()=>{this.changeOpen(1)}} value={dateValue} />
                            <DatePicker
                                value={this.state.date}
                                isOpen={this.state.isOpen}
                                onSelect={(e)=>{this.handleSelect(e)}}
                                onCancel={()=>{this.changeOpen(0)}}
                                dateFormat={this.state.dateFormat}/>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-time">
                        <lable className="title">发布时间:</lable>
                        <div className="txt">
                            <select className="time-info" onChange={(e)=>{this.getValues(e)}} name='hours'>
                                {
                                    this.state.hoursArray.map((item) => {
                                        let value = item<10?'0'+item:item
                                        return (
                                            <option value={value} key={value}>{value}</option>
                                        );
                                    }) 
                                }        
                            </select><span className="colon">:</span><select className="time-info" onChange={(e)=>{this.getValues(e)}} name='minute'>
                                {
                                    this.state.minArray.map((item) => {
                                        let value = item<10?'0'+item:item
                                        return (
                                            <option value={value} key={value}>{value}</option>
                                        );
                                    }) 
                                }        
                            </select>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-price">
                        <lable className="title">预期价格</lable>
                        <div className="txt">
                            <input type="number" name="price" placeholder="请填写价格" className="price-info" onChange={(e)=>this.getValues(e)}/>
                            <span className="price-unit">元/小时</span>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-dateLine">
                        <lable className="title">有效期</lable>
                        <div className="select-info">
                            <span className={this.isActive(7)} onClick={()=>{this.changeValue('periodOfValidity',7)}}>7天内</span>
                            <span className={this.isActive(15)} onClick={()=>{this.changeValue('periodOfValidity', 15)}}>15天内</span>
                            <span className={this.isActive(30)} onClick={()=>{this.changeValue('periodOfValidity',30)}}>30天内</span>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-dateLine">
                        <lable className="title">老师类别</lable>
                        <div className="select-info">
                            <span className={this.isTeachTypeActive(1)} onClick={()=>{this.changeValue('teacherType',1)}}>老师</span>
                            <span className={this.isTeachTypeActive(2)} onClick={()=>{this.changeValue('teacherType',2)}}>学生兼职</span>
                            <span className={this.isTeachTypeActive(3)} onClick={()=>{this.changeValue('teacherType',3)}}>其他</span>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-address">
                        <lable className="title">地点选择</lable>
                        <div className="select-info">
                            <span className={this.isAddressActive(1)} onClick={()=>{this.changeValue('address',1)}}>老师家</span>
                            <span className={this.isAddressActive(2)} onClick={()=>{this.changeValue('address',2)}}>学生家</span>
                            <span className={this.isAddressActive(3)} onClick={()=>{this.changeValue('address',3)}}>双方商量</span>
                        </div>
                    </div>
                </div>
                <div className="form-publish">
                    <div className="form-block publish-way">
                        <lable className="title">预期方式</lable>
                        <div className="select-info">
                            <span className={this.isWayActive(1)} onClick={()=>{this.changeValue('way',1)}}>一对一</span>
                            <span className={this.isWayActive(2)} onClick={()=>{this.changeValue('way',2)}}>小班(2-5)</span>
                            <span className={this.isWayActive(3)} onClick={()=>{this.changeValue('way',3)}}>大班(5人以上)</span>
                        </div>
                    </div>
                </div>
                
                <div className="form-publish">
                    <div className="form-block publish-price">
                        <lable className="title">内容</lable>
                        <div className="select-info">
                            <textarea className="remark" name="remark" placeholder="请填写备注" rows="3" cols="40" onChange={(e)=>{this.getValues(e)}}></textarea> 
                        </div>
                    </div>
                </div>
                {
                    this.props.service.skillMobile?<JudgeMobile />:''
                }
                <div className="publish-btn submit">
                    <a className="btn" onClick={()=>{this.publish()}}>发布</a>
                </div>
            </div>
        );
    }
}
const publishSkillData = (state) => {
    return {
        app:state.app,
        service: state.services,
        publishService: state.publishService,
        user: state.user
    }
}

let dispatchHandle = (dispatch, getState) => ({
    changeDate(date){
        dispatch(changeDataShow(date));
    },
    submit(data){
        dispatch(publishSkill(data));
    }
})
let visibilePublishSkill = connect(publishSkillData, dispatchHandle)(PublishSkillInfo);
export default visibilePublishSkill;